<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>吃鸡练习</title>
	</head>

	<body>
		<div>
			<button id="btn1">将吃鸡放到所有城市后面</button>
			<button id="btn2">将吃鸡放到所有城市前面</button>
			<button id="btn3">将吃鸡放到上海的后面</button>
			<button id="btn4">将吃鸡放到上海的前面</button>
			<button id="btn5">删除北京</button>
			<button id="btn6">删除所有节点</button>
		</div>
		<ul>
			<li id="beijing">北京</li>
			<li id="shanghai">上海</li>
			<li id="zhengzhou">郑州</li>
			<li id="chiji">吃鸡</li>
			<li id="wangzherongyao">王者荣耀</li>
		</ul>
	</body>
	<script type="text/javascript">
		
		let Fucen = document.getElementById('chiji').parentNode;
		let chiji = document.getElementById('chiji');

		//将吃鸡放到所有城市后面
		let btn1 = document.getElementById('btn1');
		btn1.onclick = function() {
			let wangzherongyao = document.getElementById('wangzherongyao');
			Fucen.insertBefore(chiji, wangzherongyao);
		}
		//将吃鸡放到所有城市前面
		let btn2 = document.getElementById('btn2');
		btn2.onclick = function() {
			Fucen.insertBefore(chiji, Fucen.firstChild);
		}
		//将吃鸡放到上海后面
		let btn3 = document.getElementById('btn3');
		btn3.onclick = function() {
			let zhengzhou = document.getElementById('zhengzhou');
			Fucen.insertBefore(chiji, zhengzhou);
		}
		//将吃鸡放到上海前面
		let btn4 = document.getElementById('btn4');
		btn4.onclick = function() {
			let shanhai = document.getElementById('shanghai');
			Fucen.insertBefore(chiji, shanhai);
		}
		//删除北京
		document.getElementById('btn5').addEventListener('click',function(){
				let shanchu = document.getElementById("beijing");
				if (shanchu.parentNode) {
					shanchu.parentNode.removeChild(shanchu);
				}
			})
		//删除所有子节点
		let btn6 = document.getElementById('btn6');
		btn6.onclick = function() {
			while (Fucen.firstChild) {
				Fucen.removeChild(Fucen.firstChild);
			}
		}
	</script>

</html>
